<template>
    <div
        class="px-4 pt-20"
        id="energyExchange">
        <div>
            <div class="font-weight-bold text-[32px] text-center mb-8">
                能量 <span class="text-[#00D2FF]"> / </span> 兑换
            </div>
        </div>
        <div class="energy-exchange-box max-w-[1200px] mx-auto light-circle">
            <div class="px-4 py-10 md:py-12">
                <!-- 需求 支付 -->
                <div class="flex flex-wrap justify-between mb-8">
                    <div class="w-full mb-4 md:flex-1 md:px-12 md:mb-0">
                        <div class="md:!block hidden">
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center">
                                    <div class="step-mark font-weight-bold">
                                        01
                                    </div>
                                    <div
                                        class="ml-4 font-weight-bold text-20px">
                                        填写需求
                                    </div>
                                </div>
                                <div class="w-[176] h-10 diagonal"></div>
                            </div>
                        </div>
                        <div class="mb-6">
                            <div class="mb-3 font-size-4 font-weight-bold">
                                转账笔数
                            </div>

                            <div class="flex items-center mb-2">
                                <el-input
                                    v-model="form.transfers_number"
                                    class="el-input--large md:!w-[150px] !w-[90px] !text-[20px] font-weight-bold text-center flex-shrink-0 transparent-input"
                                    style="text-align: center"
                                    type="text"
                                    autocomplete="off"
                                    id="el-id-5165-2">
                                </el-input>
                                <span class="mx-4 text-[16px]">x</span>
                                <el-select
                                    v-model="form.selectedOption"
                                    placeholder="Select"
                                    class="el-select--large md:text-[20px] text-[16px] w-full font-weight-bold text-center transparent-select"
                                    style="font-size: 16px">
                                    <el-option
                                        v-for="item in options.options1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                            <div>
                                <span
                                    class="color-[#00D2FF] font-weight-bold"
                                    >{{
                                        form.transfers_number * resData.energy
                                    }}</span
                                >&nbsp; (每笔约 {{ formattedEnergy }} 能量)
                            </div>
                        </div>
                        <div>
                            <div class="mb-3 font-size-4 font-weight-bold">
                                当前能量池可购买余额
                            </div>
                            <div>
                                <div
                                    class="exchange-input w-full text-[20px] font-weight-bold color-[#00D2FF]">
                                    {{ setBalance }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-full md:flex-1 md:px-12">
                        <div class="md:!block hidden">
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center">
                                    <div class="step-mark font-weight-bold">
                                        02
                                    </div>
                                    <div
                                        class="ml-4 font-weight-bold text-20px">
                                        支付
                                    </div>
                                </div>
                                <div class="w-[176] h-10 diagonal"></div>
                            </div>
                        </div>
                        <div
                            @click="trxCpClick"
                            class="mb-6">
                            <div class="flex justify-between">
                                <div class="mb-3 font-size-4 font-weight-bold">
                                    需转账金额
                                </div>
                                <div class="font-weight-bold">TRX</div>
                            </div>
                            <div
                                class="justify-between exchange-input copy-area">
                                <div class="flex items-center">
                                    <span
                                        class="color-[#00D2FF] text-2xl font-weight-bold mr-2"
                                        >{{ setTRx }}</span
                                    ><span
                                        class="color-[#00D2FF] font-size-4 font-weight-bold"
                                        >TRX</span
                                    ><span class="amount-tip">限时特惠</span>
                                </div>
                                <div class="flex-shrink-0 copy-btn"></div>
                            </div>
                            <div>
                                <span class="color-[#828599]"
                                    >较使用TRX转账，节省约</span
                                >&nbsp;
                                <span class="color-[#00D2FF] font-weight-bold"
                                    >{{ setTRXEconomize }} TRX</span
                                >
                            </div>
                        </div>
                        <div @click="urlCpclick">
                            <div class="mb-3 font-size-4 font-weight-bold">
                                平台收款地址
                            </div>
                            <div
                                class="flex items-center justify-between copy-area">
                                <div class="justify-between exchange-input">
                                    <div class="text-xs md:text-sm">
                                        {{ resData.receipt }}
                                    </div>
                                    <div class="flex-shrink-0 copy-btn"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-between">
                    <div class="md:flex-1 md:px-12">
                        <div class="flex items-center mb-4">
                            <img
                                width="24"
                                height="24"
                                src="../../assets/help.svg"
                                alt="help" /><span
                                class="ml-2 font-size-4 font-weight-bold"
                                >操作说明</span
                            >
                        </div>
                        <div>
                            <div class="mb-4 overflow-hidden">
                                <span class="dot"></span>
                                <p class="color-[#828599] text-sm">
                                    请使用去中心化钱包租赁能量。
                                </p>
                            </div>
                            <div class="mb-4 overflow-hidden">
                                <span class="dot"></span>
                                <p class="color-[#828599] text-sm">
                                    根据能量的租赁需求，系统会计算出兑换总量和需支付金额。支持TRX或USDT支付。
                                </p>
                            </div>
                            <div class="mb-4 overflow-hidden">
                                <span class="dot"></span>
                                <p class="color-[#828599] text-sm">
                                    转账完成后，平台将派发对应的能量到您的支付账户中。
                                </p>
                            </div>
                            <div class="mb-4 overflow-hidden">
                                <span class="dot"></span>
                                <p class="color-[#828599] text-sm">
                                    提倡按需租赁，用完再来租！每天不限笔数！
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="md:flex-1 md:px-12 md:!block hidden">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 p-2 qrcode-box">
                                <div
                                    class="w-full h-full opacity-80"
                                    id="qrCode"
                                    title="TT7adD3QHngZyg4GKGiPRB5YoA1C9vcRau">
                                    <canvas
                                        width="256"
                                        height="256"
                                        style="display: none"></canvas
                                    ><img
                                        alt="Scan me!"
                                        src=""
                                        style="display: block" />
                                </div>
                            </div>
                            <div
                                class="max-w-[230px] color-[#828599] text-sm ml-4">
                                你也可以用手机钱包扫描二维码进行支付。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "EnergyExchange",
    data() {
        return {
            resData: {
                energy: 33000,
                receipt:'TT7adD3QHngZyg4GKGiPRB5YoA1C9vcRau',
                balance:167620786,
                
            },

            options: {
                options1: [
                    
                    {value: "option2", label: "4 TRX / 一天"},
                    {value: "option3", label: "2.5 TRX / 一小时"},
                ],
            },

            form: {
                transfers_number: 0,
                selectedOption:'option3'
            },
        };
    },
    computed: {
        setTRx() {
            //trx计算
            return this.form.transfers_number;
        },
        setTRXEconomize() {
            //trx计算
            return this.form.transfers_number * 45;
        },
        formattedEnergy() {
            // 格式化能量
            return this.resData.energy.toLocaleString();
        },
        setBalance() {
            // 格式化余额
            return this.resData.balance.toLocaleString();
        },
    },
    methods: {
        trxCpClick() {
            this.copyToClipboard("TRX 内容");
        },
        urlCpclick() {
            this.copyToClipboard("URL 内容");
        },
        async copyToClipboard(content) {
            try {
                await navigator.clipboard.writeText(content);
                this.$message({
                    message: "复制成功",
                    type: "success",
                    customClass: "custom-message", // 添加自定义类
                });
            } catch (err) {
                this.$message.error("复制失败");
            }
        },
    },
};
</script>

<style scoped>
</style>
